<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时展示</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            color: white;
        }

        .container {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }

        .countdown-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            width: 300px;
            perspective: 1000px;
            cursor: pointer;
        }

        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }

        .countdown-card:hover .card-inner {
            transform: rotateY(180deg);
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        .card-back {
            transform: rotateY(180deg);
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 20px;
        }

        h2 {
            margin: 0 0 20px 0;
            color: #ffffff;
        }

        .time-section {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .time-item {
            background: rgba(255, 255, 255, 0.2);
            padding: 10px;
            border-radius: 8px;
            min-width: 60px;
        }

        .number {
            font-size: 24px;
            font-weight: bold;
        }

        .label {
            font-size: 12px;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 劳动节倒计时 -->
        <div class="countdown-card">
            <div class="card-inner">
                <div class="card-front">
                    <h2>距离2025年劳动节还有</h2>
                    <div class="time-section" id="labor-countdown">
                        <div class="time-item">
                            <div class="number" id="labor-days">00</div>
                            <div class="label">天</div>
                        </div>
                        <div class="time-item">
                            <div class="number" id="labor-hours">00</div>
                            <div class="label">时</div>
                        </div>
                        <div class="time-item">
                            <div class="number" id="labor-minutes">00</div>
                            <div class="label">分</div>
                        </div>
                        <div class="time-item">
                            <div class="number" id="labor-seconds">00</div>
                            <div class="label">秒</div>
                        </div>
                    </div>
                </div>
                <div class="card-back">
                    <h2>2025年劳动节</h2>
                    <p>愿你度过一个愉快的假期！</p>
                </div>
            </div>
        </div>

        <!-- 新年倒计时 -->
        <div class="countdown-card">
            <div class="card-inner">
                <div class="card-front">
                    <h2>距离2026年春节还有</h2>
                    <div class="time-section" id="newyear-countdown">
                        <div class="time-item">
                            <div class="number" id="newyear-days">00</div>
                            <div class="label">天</div>
                        </div>
                        <div class="time-item">
                            <div class="number" id="newyear-hours">00</div>
                            <div class="label">时</div>
                        </div>
                        <div class="time-item">
                            <div class="number" id="newyear-minutes">00</div>
                            <div class="label">分</div>
                        </div>
                        <div class="time-item">
                            <div class="number" id="newyear-seconds">00</div>
                            <div class="label">秒</div>
                        </div>
                    </div>
                </div>
                <div class="card-back">
                    <h2>2026年春节</h2>
                    <p>新年快乐！万事如意！</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        function updateCountdown(targetDate, daysId, hoursId, minutesId, secondsId) {
            const now = new Date();
            const target = new Date(targetDate);
            const diff = target - now;

            if (diff <= 0) {
                document.getElementById(daysId).textContent = '00';
                document.getElementById(hoursId).textContent = '00';
                document.getElementById(minutesId).textContent = '00';
                document.getElementById(secondsId).textContent = '00';
                return;
            }

            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            document.getElementById(daysId).textContent = days.toString().padStart(2, '0');
            document.getElementById(hoursId).textContent = hours.toString().padStart(2, '0');
            document.getElementById(minutesId).textContent = minutes.toString().padStart(2, '0');
            document.getElementById(secondsId).textContent = seconds.toString().padStart(2, '0');
        }

        // 更新劳动节倒计时
        setInterval(() => {
            updateCountdown(
                '2025-05-01T00:00:00',
                'labor-days',
                'labor-hours',
                'labor-minutes',
                'labor-seconds'
            );
        }, 1000);

        // 更新春节倒计时
        setInterval(() => {
            updateCountdown(
                '2026-02-16T00:00:00',
                'newyear-days',
                'newyear-hours',
                'newyear-minutes',
                'newyear-seconds'
            );
        }, 1000);
    </script>
</body>
</html>
